<template>
  <div id="app">
    <el-tabs type="border-card" v-model="editableTabsValue">

      <el-tab-pane label="收藏管理" name="1">

        <div class="el-select">
            <el-select v-model="selectvalue1" filterable placeholder="请选择菜品名称">
              <el-option
                v-for="item in options1"
                :key="item.selectvalue"
                :label="item.label"
                :value="item.selectvalue">
              </el-option>
            </el-select>

            <el-select v-model="selectvalue2" filterable placeholder="请选择用户名">
              <el-option
                v-for="item in options2"
                :key="item.selectvalue"
                :label="item.label"
                :value="item.selectvalue">
              </el-option>
            </el-select>

          <div class="el-select">
            <el-button @click="search">搜索</el-button>
          </div>
        </div>

        <el-table
          :data="favoritedata"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="name"
            label="菜品名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="createdAt"
            label="添加时间"
            width="200">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClickdel(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total=pages
          :page-size=pager
          :current-page=page
          class="el-pagination">
        </el-pagination>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<style>
  .el-select {
    float: left;
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-pagination {
    text-align:center
  }

  .cell {
    text-align:center
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

</style>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      favoritedata: [],
      pages: 50,
      page: 1,
      pager: 10,
      
      editableTabsValue: '1',

      options1: [],
      selectvalue1: '',
      options2: [],
      selectvalue2: '',
    }
  },

  created() {
    this.favorite();
    this.favorited('cookbookId');
    this.favorited('userId');
  },

  methods: {
    search() {
      this.favorite(1, this.selectvalue1, this.selectvalue2);
    },

    async favorite(page, a1, a2) {
      let {data} = await axios({
        method: 'get',
        url: '/api/admin/favorite',
        params: {
          page,
          a1,
          a2
        }
      });
      
      this.page = page;
      this.pages = data.prepage;
      this.favoritedata = data.data;
    },

    async favorited(group) {
      let {data} = await axios({
        method: 'get',
        url: '/api/admin/favorite/name',
        params: {
          group
        }
      });
      if(group == 'cookbookId'){
        this.options1 = data.data;
          this.options1.push({
          selectvalue: '',
          label: ''
        });
      }
      if(group == 'userId'){
        this.options2 = data.data;
          this.options2.push({
          selectvalue: '',
          label: ''
        });
      }  
      
    },

    tableRowClassName({row, rowIndex}) {
      if (rowIndex%4 == 1) {
        return 'warning-row';
      } else if (rowIndex%4 == 3) {
        return 'success-row';
      }
      return '';
    },

    handleCurrentChange(val) {
      this.favorite(val);
    },

    async handleClickdel(id) {
      let {data} = await axios({
        method: 'post',
        url: '/api/admin/favorite/del',
        data: {
          id
        }
      });

      if(data.code){
        this.$message.error(data.message);
      }else{
        this.favoritedata = this.favoritedata.filter( item => {
          if(item.id != id){
            return item;
          }
        } );
        this.$message({
          message: data.message,
          type: 'success'
        });
      }
    }
  }
}
</script>